<template>
  <div>
    <!-- <el-row type='flex' >
    <el-button style="float:right" size="small" type="primary">新增员工</el-button>
    </el-row> -->
    <el-header>
      <el-button style="float: right" type="primary" size="small" @click="jump">
        新增试题
      </el-button>
    </el-header>
    <!-- 表单内容 -->
    <el-form ref="myForm" :model="formData" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select
              v-model="formData.subjectID"
              placeholder="请选择"
              @change="subjectChange"
            >
              <el-option
                v-for="(item, index) in form.subjects"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="二级目录" label-width="80px" prop="catalogID">
            <el-select v-model="formData.catalogID" placeholder="请选择">
              <el-option
                v-for="(item, index) in catalogList"
                :key="index"
                :label="item.directoryName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select v-model="formData.tags" placeholder="请选择">
              <el-option
                v-for="(item, index) in tagList"
                :key="index"
                :label="item.tagName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="关键字" label-width="80px" prop="keyword">
            <el-input v-model="formData.keyword" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="formData.questionType" placeholder="请选择">
              <el-option label="单选" value="1" />
              <el-option label="多选" value="2" />
              <el-option label="简答" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="formData.difficulty" placeholder="请选择">
              <el-option label="简单" value="1" />
              <el-option label="一般" value="2" />
              <el-option label="困难" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-input v-model="formData.direction" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="录入人" prop="reatorID">
            <el-input v-model="formData.reatorID" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col
          :span="6"
        ><el-form-item label="题目备注" prop="remarks">
          <el-input v-model="formData.remarks" /> </el-form-item></el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="formData.shortName" /> </el-form-item></el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="城市" prop="province">
            <el-select
              v-model="formData.province"
              placeholder="请选择"
              @change="provinceChange"
            >
              <el-option
                v-for="(item, index) in form.citys"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-select v-model="formData.city" placeholder="请选择">
              <el-option
                v-for="(item, index) in citysArea"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select> </el-form-item></el-col>
        <el-col :span="8" :offset="2">
          <el-button @click="clear('form')"> 清除</el-button>
          <el-button
            type="primary"
            @click="handleSearch"
          >搜索</el-button></el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getSujectList, getDirectorysList, getTagsList } from '@/api/questions'
import { provinces, citys } from '@/api/constant/citys'

export default {
  name: 'WorkspaceJsonSerachtext',

  data() {
    return {
      formData: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        questionType: '', // 题型
        difficulty: '', // 难度
        tags: '', // 标签
        province: '',
        city: ''
      },
      userInfo: {},
      form: {
        subjects: [],
        citys: []

      },
      catalogList: [],
      tagList: [],
      citysArea: []
    }
  },

  mounted() {},
  created() {
    this.getSujectList()
    this.getCitysList()
  },

  methods: {
    jump() {
      this.$router.push('/questions/new')
    },
    // 学科相关
    async getSujectList() {
      const { data } = await getSujectList()
      this.form.subjects = data
      console.log('subject', this.form.subjects)
    },
    // 学科变化
    subjectChange(val) {
      console.log(val)
      // console.log("学科输入框变了", val);
      this.getDirectorysList(val)
      this.getTagsList(val)
    },
    // 获取目录
    async getDirectorysList(val) {
      const { data } = await getDirectorysList(val)
      console.log('val', val)
      console.log(data.items)
      this.catalogList = data.items
      console.log('catalogList', this.catalogList)
    },
    // 获取标签
    async getTagsList(val) {
      const data = await getTagsList(val)
      this.tagList = data.data.items
      console.log(data)
    },
    handleSearch() {
      this.$emit('handleSearch', this.formData)
      // this.$refs.myForm.resetFields()
    },
    clear() {
      console.log('aaa')
      this.$refs.myForm.resetFields()
      this.formData.city = []
      this.$emit('handleSearch', this.formData)
    },

    // 获取城市数据
    async getCitysList() {
      try {
        const data = await provinces()
        this.form.citys = data
      } catch (err) {
        console.log(err)
      }
    },
    // 获取城市地区数据
    async getCitysAreaList(val) {
      try {
        const data = await citys(val)
        this.citysArea = data
        console.log(this.citysArea)
      } catch (err) {
        console.log(err)
      }
    },
    // 城市变化监听事件
    provinceChange(val) {
      if (val) {
        this.getCitysAreaList(val)
      } else {
        this.form.citysArea = []
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
